<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>FusionWidgets XT - Angular gauge with various default origins</title>
        <script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
		<script type="text/javascript" language="Javascript" src="../assets/ui/js/jquery.min.js"></script>
		<script type="text/javascript" language="Javascript" src="../assets/ui/js/lib.js"></script>

        <link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" />

        <!--[if IE 6]>
        <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>

		<script>
          /* select the element name, css selector, background etc */
          DD_belatedPNG.fix('img');

          /* string argument can be any CSS selector */
        </script>
        <![endif]-->
		
		<style type="text/css">
            h2.headline {
                font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
                padding: 0;
                margin: 25px 0 25px 0;
                color: #7d7c8b;
                text-align: center;
            }
            p.small {
                font: normal 68.75%/150% Verdana, Geneva, sans-serif;
                color: #919191;
                padding: 0;
                margin: 0 auto;
                width: 664px;
                text-align: center;
            }
			
			.headerbg, .headerbg td , .headerbg th{ background-color:#eee; color:#000 !important;}
			table, table tr td { font-size:12px !important; border:1px solid #ccc !important;}
			
			
        </style>
		
</head>
    <body>

        <div id="wrapper">

            <div id="header">
                

               <div class="logo"><a class="imagelink"  href="http://www.fusioncharts.com/widgets" target="_blank"><img src="../assets/ui/images/fwxt-logo.png" width="73" height="74" alt="FusionWidgets XT logo" /></a></div>
				 <h1 class="brand-name">FusionWidgets XT</h1>
                <h1 class="logo-text">Angular gauge origins</h1>
            </div>
			
			 <div class="content-area">
                <div id="content-area-inner-main">
                    <p class="text" align="center">The sample displays angular gauges with different default origins based on the start angle and end angle</p>
					<div id="messageBox" style="margin-left:130px; margin-right:130px; display:none;"></div>
					<p>&nbsp;</p>

                    <div class="gen-chart-render">
						<center>
						<table border="0" cellspacing="5" cellpadding="5" class="table" width="520">
						   <tr>
						      <td colspan="2" align="center" valign="top" class="headerbg">Configure the start angle and the end angle live by dragging the sliders below:</td>
					       </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top"><div id="chartContainerAng">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top"><div id="chartContainerSA">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top"><div id="chartContainerEA">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
							  <td align="center" valign="top"><strong>Select Start Angle</strong></td>
							  <td align="center" valign="top"><strong>Select End Angle</strong></td>
						   </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF;">&nbsp;</td>
					       </tr>
						   
						   <tr>
						      <td colspan="2" align="center" valign="top" class="headerbg">or, check out the ready made examples of gauges with different angle combinations: </td>
					       </tr>
						   
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer0_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer0_1">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top" id="angles0_0" >&nbsp;</td>
						      <td align="center" valign="top" id="angles0_1">&nbsp;</td>
					       </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer1_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer1_1">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top" id="angles1_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles1_1">&nbsp;</td>
					       </tr>

						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer2_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer2_1">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top" id="angles2_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles2_1">&nbsp;</td>
					       </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer3_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer3_1">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top" id="angles3_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles3_1">&nbsp;</td>
					       </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer4_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer4_1">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top" id="angles4_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles4_1">&nbsp;</td>
					       </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer5_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer5_1">FusionWidgets XT will load here!</div></td>
					       </tr>
						   <tr>
						      <td align="center" valign="top" id="angles5_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles5_1">&nbsp;</td>
					       </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer6_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer6_1">FusionWidgets XT will load here!</div></td>
						   </tr>
						   <tr>
						      <td align="center" valign="top" id="angles6_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles6_1">&nbsp;</td>
						   </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer7_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer7_1">FusionWidgets XT will load here!</div></td>
						   </tr>
						   <tr>
						      <td align="center" valign="top" id="angles7_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles7_1">&nbsp;</td>
						   </tr>
						   <tr>
						      <td colspan="2" align="center" valign="top" style="font-size:8px; padding:0 !important; margin:0 !important;" height="8">&nbsp;</td>
					       </tr>
						   <tr>
						      <td align="center" valign="top">
					          <div id="chartContainer8_0">FusionWidgets XT will load here!</div></td>
						      <td align="center" valign="top">
					          <div id="chartContainer8_1">FusionWidgets XT will load here!</div></td>
						   </tr>
						   <tr>
						      <td align="center" valign="top" id="angles8_0">&nbsp;</td>
						      <td align="center" valign="top" id="angles8_1">&nbsp;</td>
						   </tr>
						</table>
						</center>
						
						
                        <script type="text/javascript"><!--
							$(document).ready ( function() {
							

								
								xmlDataAng = '<chart gaugeStartAngle="180" gaugeEndAngle="0" animation="0" bgColor="FFFFFF,FFFFFF" majorTMNumber="5" minorTMNumber="8" lowerLimit="0" upperLimit="100" >\
								  <colorRange>\
								    <color minValue="0" maxValue="25" code="FF654F"/>\
								    <color minValue="25" maxValue="50" code="F6BD0F"/>\
								    <color minValue="50" maxValue="75" code="8BBA00"/>\
								    <color minValue="75" maxValue="100" />\
								  </colorRange>\
								  <dials>\
								    <dial value="45" />\
								  </dials>\
								</chart>';
																
								xmlDataSA = '<chart editMode="1"  bgColor="FFFFFF" showBorder="0" majorTMNumber="5" minorTMNumber="1" lowerLimit="-360" upperLimit="360" decimals="0" pointerRadius="15">\
								  <colorRange>\
								    <color minValue="-360" maxValue="-270" code="6D8A9E"/>\
								    <color minValue="-270" maxValue="-180" code="779421"/>\
								    <color minValue="-180" maxValue="-90" code="D1A316"/>\
								    <color minValue="-90" maxValue="0" code="BA5344"/>\
								    <color minValue="0" maxValue="90" code="FF654F"/>\
								    <color minValue="90" maxValue="180" code="F6BD0F"/>\
								    <color minValue="180" maxValue="270" code="8BBA00"/>\
								    <color minValue="270" maxValue="360" code="C6DEEF"/>\
								  </colorRange>\
								  <pointers>\
								    <pointer value="180" />\
								  </pointers>\
								</chart>';								
								
								
								FusionCharts.render({ swfUrl : "../../Charts/AngularGauge.swf", renderAt:"chartContainerAng" , width: 510, height: 400, dataSource: xmlDataAng, dataFormat: "xml", id: "myChartIdANG" } );
								FusionCharts.render({ swfUrl : "../../Charts/HLinearGauge.swf", renderAt:"chartContainerSA", width: 250, height: 100, dataSource: xmlDataSA, dataFormat: "xml", id: "myChartIdSA" } );
								FusionCharts.render({ swfUrl : "../../Charts/HLinearGauge.swf", renderAt:"chartContainerEA", width: 250, height: 100, dataSource: xmlDataSA.replace('value="180"', 'value="0"'), dataFormat: "xml", id: "myChartIdEA" } );
								
								FusionCharts("myChartIdSA").addEventListener("RealtimeUpdateComplete", function(e,a) {
									FusionCharts("myChartIdANG").setChartAttribute("gaugeStartAngle",e.sender.getData(1));
								});
								FusionCharts("myChartIdEA").addEventListener("RealtimeUpdateComplete", function(e,a) {
									FusionCharts("myChartIdANG").setChartAttribute("gaugeEndAngle",e.sender.getData(1));
								});
								
							
								var origins  = [
									[[180,0],[135,45]],
									[[90,0],[65,25]],
									[[180,90],[165,105]],
									[[180,-180],[210,-30]],
									[[180,360],[224,315]],
									[[270,360],[295,335]],
									[[180,270],[200,240]],
									[[90,-90],[45,-45]],
									[[90,270],[135,225]]
								];								
								
								for( var i=0; i<origins.length; i++)
								{
									for( var j=0; j<origins[i].length; j++)	
									{
									
										var angles = 'gaugeStartAngle="'+ origins[i][j][0] + '" gaugeEndAngle="' + origins[i][j][1] + '"';
										
										var xmldata = '<chart '+ angles + ' lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" numberSuffix="%" showValue="1">\n\
										<colorRange>\n\
										<color minValue="0" maxValue="75" code="FF654F"/>\n\
										<color minValue="75" maxValue="90" code="F6BD0F"/>\n\
										<color minValue="90" maxValue="100" code="8BBA00"/>\n\
										</colorRange>\n\
										<dials>\n\
										<dial value="92" />\n\
										</dials>\n\
										</chart>';
										
										if(origins[i][j][0]==180 && origins[i][j][1]==-180)
										{
											xmldata = xmldata.replace('upperLimitDisplay="Good"', 'upperLimitDisplay=" "');
											xmldata = xmldata.replace('lowerLimitDisplay="Bad"', ' ');
										}	
									
										FusionCharts.render({ swfUrl : "../../Charts/AngularGauge.swf", renderAt:"chartContainer"+i+"_"+j , width: 250, height: 220, dataSource: xmldata, dataFormat: "xml", id: "myChartId"+i+"_"+j } );
										$("#angles"+i+"_"+j).html(angles);
									
									}
								}
								

								
								
								 showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript charts are rendered instead.", isJSRenderer(FusionCharts("myChartId0_0")) );

							});
						
						
					
						 // -->
						 </script>
						
						 </div>
                    <div class="clear"></div>
                    <p>&nbsp;</p>
                    <p class="small">    </p>
                    <div class="underline-dull"></div>
                </div>
            </div>
			<div id="footer">
                <p class="highlightBlock">The above sample showcases angular gauges with different default origins (center) based on the start angle and end angle. Click <a href="../../Contents/Index.html?Angular/Angles.html#origin" target="_blank">here</a> to know more on the default origins of angular gauge.</p>
            </div>
        </div>
        
		 <script type="text/javascript"><!--//
		// -->
		</script>
    </body>
</html>


    
   